import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/auth_controller.dart';
import '../../../translations/app_translations.dart';
import '../../../services/locale_service.dart';


class LoginView extends GetView<AuthController> {
  const LoginView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final localeService = Get.find<LocaleService>();
    
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 32.0),
              child: Form(
                key: controller.formKey,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    // Logo或标题
                    Center(
                      child: Text(
                        LocaleKeys.loginTitle.tr,
                        style: const TextStyle(
                          fontSize: 26,
                          fontWeight: FontWeight.bold,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                    const SizedBox(height: 48),
                    
                    // 用户名输入框
                    TextFormField(
                      controller: controller.usernameController,
                      decoration: InputDecoration(
                        labelText: LocaleKeys.username.tr,
                        prefixIcon: const Icon(Icons.person),
                        border: const OutlineInputBorder(),
                        hintText: LocaleKeys.enterUsername.tr,
                      ),
                      validator: controller.validateUsername,
                    ),
                    const SizedBox(height: 20),
                    
                    // 密码输入框
                    Obx(() => TextFormField(
                      controller: controller.passwordController,
                      obscureText: !controller.isPasswordVisible.value,
                      decoration: InputDecoration(
                        labelText: LocaleKeys.password.tr,
                        prefixIcon: const Icon(Icons.lock),
                        border: const OutlineInputBorder(),
                        hintText: LocaleKeys.enterPassword.tr,
                        suffixIcon: IconButton(
                          icon: Icon(
                            controller.isPasswordVisible.value
                                ? Icons.visibility
                                : Icons.visibility_off,
                          ),
                          onPressed: controller.togglePasswordVisibility,
                        ),
                      ),
                      validator: controller.validatePassword,
                    )),
                    const SizedBox(height: 32),
                    
                    // 记住我复选框
                    Obx(() => Row(
                      children: [
                        Checkbox(
                          value: controller.rememberMe.value,
                          onChanged: (value) {
                            controller.toggleRememberMe();
                          },
                        ),
                        GestureDetector(
                          onTap: controller.toggleRememberMe,
                          child: Text(
                            LocaleKeys.rememberMe.tr,
                            style: TextStyle(color: Colors.grey[700]),
                          ),
                        ),
                      ],
                    )),
                    const SizedBox(height: 12),
                    
                    // 错误信息
                    Obx(() => controller.errorMessage.value.isNotEmpty
                        ? Padding(
                            padding: const EdgeInsets.only(bottom: 16.0),
                            child: Text(
                              controller.errorMessage.value,
                              style: const TextStyle(color: Colors.red),
                              textAlign: TextAlign.center,
                            ),
                          )
                        : const SizedBox.shrink()),
                    
                    // 登录按钮
                    Obx(() => ElevatedButton(
                      onPressed: controller.isLoading.value
                          ? null
                          : controller.login,
                      style: ElevatedButton.styleFrom(
                        padding: const EdgeInsets.symmetric(vertical: 16),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8),
                        ),
                      ),
                      child: controller.isLoading.value
                          ? const SizedBox(
                              height: 20,
                              width: 20,
                              child: CircularProgressIndicator(
                                strokeWidth: 2,
                              ),
                            )
                          : Text(
                              LocaleKeys.login.tr,
                              style: const TextStyle(fontSize: 16),
                            ),
                    )),
                    
                    const SizedBox(height: 24),
                    
                    // 底部语言切换按钮
                    Container(
                      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                      decoration: BoxDecoration(
                        color: Colors.grey.withOpacity(0.1),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          _buildLanguageButton(
                            localeService, 
                            'zh', 
                            'CN', 
                            LocaleKeys.chinese.tr,
                            localeService.switchToChinese
                          ),
                          _buildDivider(),
                          _buildLanguageButton(
                            localeService, 
                            'en', 
                            'US', 
                            LocaleKeys.english.tr,
                            localeService.switchToEnglish
                          ),
                          _buildDivider(),
                          _buildLanguageButton(
                            localeService, 
                            'ko', 
                            'KR', 
                            LocaleKeys.korean.tr,
                            localeService.switchToKorean
                          ),
                          _buildDivider(),
                          _buildLanguageButton(
                            localeService, 
                            'ar', 
                            'SA', 
                            LocaleKeys.arabic.tr,
                            localeService.switchToArabic
                          ),
                        ],
                      ),
                    ),
                    
                    // 添加底部安全区域
                    SizedBox(height: MediaQuery.of(context).padding.bottom + 16),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
  
  // 构建语言切换按钮
  Widget _buildLanguageButton(
    LocaleService localeService,
    String languageCode,
    String countryCode,
    String text,
    VoidCallback onPressed
  ) {
    final isSelected = Get.locale?.languageCode == languageCode && 
                      Get.locale?.countryCode == countryCode;
    
    return TextButton(
      onPressed: onPressed,
      style: TextButton.styleFrom(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        minimumSize: Size.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      child: Text(
        text,
        style: TextStyle(
          fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
          decoration: isSelected ? TextDecoration.underline : TextDecoration.none,
          fontSize: 14,
          color: isSelected ? Colors.blue.shade700 : Colors.grey.shade700,
        ),
      ),
    );
  }
  
  // 构建分隔线
  Widget _buildDivider() {
    return Container(
      height: 16,
      width: 1,
      color: Colors.grey.withOpacity(0.5),
    );
  }
} 